<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>
{include file="system@block/layui" /}

<div id="box">
<el-form ref="form" :model="form" label-width="80px" :inline="true">
	<span style="font-size: 22px;margin-left: 50px">订单编号：{{sn}}</span>
	<span style="font-size: 22px;margin-left: 50px">会员：{{user}}</span>
	<span style="font-size: 22px;margin-left: 50px">房间：{{room}}</span>
	<el-card class="box-card">
	  <div slot="header" class="clearfix">
	    <span>会员详情</span>
	  </div>
	  <div class="text item">
	    	用户会员卡：￥{{userBalance}} 元
	  </div>
    <div class="text item">
        用户会员卡赠送金额：￥{{userBalanceZeng}} 元
    </div>
	  <div class="text item">
	    	用户疗程卡：
	    	<div v-for="item,idx in userCards" :key="idx" style="margin-left: 20px">
	    		{{ idx + 1 }}.{{item.name}} ：<span v-for="val,key in item.project">{{ val.name }} * {{val.num}} &emsp;</span>
	    	</div>
	  </div>
	</el-card>

<div>
 <el-divider content-position="left">项目</el-divider>
<el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      label="项目名称"
      width="100">
      <template slot-scope="scope">
            {{scope.row.project_name}}
      </template>
    </el-table-column>

    <el-table-column
      label="数量"
      width="50">
      <template slot-scope="scope">
       <!-- <el-input-number v-model="scope.row.num" size="small" :min="1" @change="setProduct_price(scope.row, $event)"></el-input-number> -->
       {{ scope.row.num }}
      </template>
    </el-table-column>

    <el-table-column
      label="金额">
      <template slot-scope="scope">
        <el-input v-model="scope.row.price"></el-input>
      </template>
    </el-table-column>
    <el-table-column
      label="是否赠送"
      width="100">
      <template slot-scope="scope">
            <el-select v-model="scope.row.is_give" placeholder="请选择项目" >
                  <el-option label="否"  :value="1"></el-option>
                  <el-option label="是"  :value="2"></el-option>
            </el-select>
      </template>
    </el-table-column>
      <el-table-column label="顾问">
  <template slot-scope="scope">
     <el-select v-model="scope.row.adviser_id" placeholder="请选择顾问">
      <el-option v-for="item,idx in advisers" :key="idx" :label="item.nick" :value="item.id"></el-option>
    </el-select>
    </template>
  </el-table-column>
   <el-table-column label="美容师">
  <template slot-scope="scope">
      <el-select v-model="scope.row.technician_ids" multiple placeholder="请选择美容师">
    <el-option
    v-for="item in technicians"
    :key="item.id"
    :label="item.nick"
    :value="item.id">
    </el-option>
  </el-select>
    </template>
  </el-table-column>
     <el-table-column
      label="手工">
      <template slot-scope="scope">
       <el-input-number v-model="scope.row.shougong" size="mini" controls-position="right" @blur="shougongChange(scope.row.shougong,scope.$index)" :min="0" :precision="2" :step="1"></el-input-number>
      </template>
    </el-table-column>
    <el-table-column
      label="备注">
      <template slot-scope="scope">
       <el-input v-model="scope.row.bak"></el-input>
      </template>
    </el-table-column>
   <el-table-column label="结算方式" width="150">
	  <template slot-scope="scope">
	      <el-select v-model="scope.row.settlement"  placeholder="请选择结算方式">
		    <el-option v-for="item,idx in settlements" :label="item.name"   :value="item.value">
		    </el-option>
      </el-select>

	    </template>
  </el-table-column>
  <el-table-column label="选择疗程卡" width="150">
	  <template slot-scope="scope">
      <el-select v-if="scope.row.settlement == 4" v-model="scope.row.card_pid"  placeholder="请选择疗程卡" @change="getProjectItem(scope.$index)">
		    <el-option v-for="item,idx in userCards" :key="idx"  :label="item.name" :value="item.id">{{item.name }} （{{item.account_id < 0 ? '赠送' : '购买'}}）---￥{{ item.price1}}</el-option>
      </el-select>
      <!-- <el-input-number v-if="scope.row.settlement == 4" size="mini" v-model="scope.row.card_num" :min="1"></el-input-number> -->
	    </template>
  </el-table-column>
	<el-table-column label="项目详情" width="150">
		<template slot-scope="scope">
			{{scope.row.projectArr}}
			<!-- <span v-for="itemx,idxx in scope.row.projectArr" :key="idxx" >{{ itemx.name }} * {{itemx.num}}</span> -->
			</template>
	</el-table-column>
  </el-table>
<span style="color:red">* 注：项目如果赠送，结算方式请选择赠送相关选项！</span>
</div>

   <el-form-item label="项目金额" >
	<el-input type="text" v-model="form.service_price"> </el-input>
	</el-form-item>

<div>
 <el-divider content-position="left">产品</el-divider>
<el-button type="success" @click="addPro">新增产品</el-button>
<el-table
    :data="productData"
    border
    style="width: 100%">
    <el-table-column
      label="产品名称"
      fixed
      width="180">
      <template slot-scope="scope">
      		<el-select v-model="scope.row.product_id" filterable  @change="proSelect(scope.$index)" placeholder="请选择产品">
			      <el-option v-for="item,idx in products" :label="item.name" :value="item.id" :key="idx"></el-option>
		    </el-select>
	  </template>
    </el-table-column>

    <el-table-column
    width="150"
      label="数量">
      <template slot-scope="scope">
	   <!-- <el-input v-model="scope.row.num"></el-input> -->
	   <el-input-number v-model="scope.row.num" size="small" :min="0" @change="setProduct_price2(scope.row, $event)"></el-input-number>

	  </template>
    </el-table-column>


    <el-table-column
      label="金额">
      <template slot-scope="scope">
	   <el-input v-model="scope.row.price2"></el-input>
	  </template>
    </el-table-column>

     <el-table-column label="顾问" width="150">
  <template slot-scope="scope">
     <el-select v-model="scope.row.adviser_id" placeholder="请选择顾问">
      <el-option v-for="item,idx in advisers" :key="idx" :label="item.nick" :value="item.id"></el-option>
    </el-select>
    </template>
  </el-table-column>

   <el-table-column label="美容师" width="150">
  <template slot-scope="scope">
      <el-select v-model="scope.row.technician_ids" multiple placeholder="请选择美容师">
    <el-option
    v-for="item in technicians"
    :key="item.id"
    :label="item.nick"
    :value="item.id">
    </el-option>
  </el-select>
    </template>
  </el-table-column>

<el-table-column label="结算方式" width="150">
	  <template slot-scope="scope">
	      <el-select v-model="scope.row.settlement"  placeholder="请选择结算方式">
		    <el-option v-for="item,idx in settlements" :label="item.name"   :value="item.value">
		    </el-option>
		  </el-select>
	    </template>
  </el-table-column>
	<el-table-column label="选择产品卡" width="150">
	  <template slot-scope="scope">
      <el-select v-if="scope.row.settlement == 4" v-model="scope.row.card_pid"  placeholder="请选择产品卡">
		    <el-option v-for="item,idx in userCards" :key="idx" :label="item.name"   :value="item.id">
		    </el-option>
      </el-select>
      <!-- <el-input-number v-if="scope.row.settlement == 4" size="mini" v-model="scope.row.card_num" :min="1"></el-input-number> -->
	    </template>
  </el-table-column>
<el-table-column label="是否寄存" width="150">
	  <template slot-scope="scope">
	      <el-select v-model="scope.row.is_deposit"  placeholder="请选择结算方式">
		    <el-option label="带走" :value="1"></el-option>
		    <el-option label="寄存" :value="2"></el-option>
		  </el-select>
	    </template>
  </el-table-column>
	<el-table-column label="仓库" width="150">
		<template slot-scope="scope">
			<el-select v-model="scope.row.warehouse_id"  placeholder="请选择仓库">
  		    <el-option v-for="item,idx in warehouses" :label="item.name"   :value="item.id" :key="item.id">
  		    </el-option>
  		  </el-select>
		</template>
		</el-table-column>
    <el-table-column
      label="备注">
      <template slot-scope="scope">
	   <el-input v-model="scope.row.bak"></el-input>
	  </template>
    </el-table-column>

    <el-table-column
      fixed="right"
      label="操作">
      <template slot-scope="scope">
	   <el-button @click.prevent="removeItem(scope.$index)">删除</el-button>
	  </template>
    </el-table-column>

  </el-table>
  <el-form-item label="产品金额" >
	<el-input type="text" v-model="form.product_price"> </el-input>
	</el-form-item>
</div>
<div>
 <el-divider content-position="left">充值会员卡</el-divider>

 <el-form-item label="充值金额" >
  <el-input type="text" v-model="form.recharge.price"> </el-input>
</el-form-item>

 <el-form-item label="赠送金额" >
  <el-input type="text" v-model="form.recharge.price2"> </el-input>
</el-form-item>
<span style="color:red">* 注：此项不计入总额，如果客户充值了，需在此备注！</span>
</div>
<div>
<el-divider content-position="left">充值疗程卡</el-divider>
<el-button type="success" @click="addCard">新增疗程卡</el-button>
<span style="color:red">* 注：此项不计入总额，如果客户充值了，需在此备注！</span>
<el-table
    :data="cardData"
    border
    style="width: 100%">
    <el-table-column
      label="疗程卡名称"
      fixed
      width="180">
      <template slot-scope="scope">
          <el-select v-model="scope.row.id" filterable  @change="cardSelect(scope.$index)" placeholder="请选择疗程卡">
            <el-option v-for="item,idx in cardList" :label="item.name" :value="item.id" :key="idx"></el-option>
        </el-select>
    </template>
    </el-table-column>

    <el-table-column
      label="金额">
      <template slot-scope="scope">
     <el-input v-model="scope.row.price"></el-input>
    </template>
    </el-table-column>

     <el-table-column label="顾问">
  <template slot-scope="scope">
     <el-select v-model="scope.row.adviser_id" placeholder="请选择顾问">
      <el-option v-for="item,idx in advisers" :key="idx" :label="item.nick" :value="item.id"></el-option>
    </el-select>
    </template>
  </el-table-column>

   <el-table-column label="美容师">
  <template slot-scope="scope">
      <el-select v-model="scope.row.technician_ids" multiple placeholder="请选择美容师">
    <el-option
    v-for="item in technicians"
    :key="item.id"
    :label="item.nick"
    :value="item.id">
    </el-option>
  </el-select>
    </template>
  </el-table-column>

<el-table-column label="结算方式" width="150">
    <template slot-scope="scope">
        <el-select v-model="scope.row.settlement"  placeholder="请选择结算方式">
        <el-option v-for="item,idx in settlements" :label="item.name"   :value="item.value">
        </el-option>
      </el-select>
      </template>
  </el-table-column>

    <el-table-column
      label="备注">
      <template slot-scope="scope">
     <el-input v-model="scope.row.bak"></el-input>
    </template>
    </el-table-column>

    <el-table-column
      fixed="right"
      label="操作">
      <template slot-scope="scope">
     <el-button @click.prevent="removeItem1(scope.$index)">删除</el-button>
    </template>
    </el-table-column>

  </el-table>

</div>




<div>
 <el-divider content-position="left">结算</el-divider>
<span style="color:red">* 注：如果以上支付方式全部为会员卡结算，收款账户请选择会员卡支付！如果有现金结算方式请选择其他的收款账户！！！</span><br>
<el-form-item label="总金额" >
	<el-input type="text" v-model="form.zong_price"> </el-input>
</el-form-item>
<el-form-item label="收款账户" >
	<!-- <el-input type="text" v-model="form.account_id"> </el-input> -->
	<el-select v-model="form.account_id" placeholder="请选择收款账户">
      <el-option v-for="item,idx in accounts" :key="item.id" :label="item.name" :value="item.id"></el-option>
    </el-select>
</el-form-item>
    <el-form-item label="收银">
     <el-select v-model="form.cashier_id" placeholder="请选择收银">
      <el-option v-for="item,idx in cashiers" :key="item.id" :label="item.nick" :value="item.id"></el-option>
    </el-select>
  </el-form-item>

    <el-form-item>
    <el-button type="primary" @click="onSubmit(3)">结单转财务</el-button>
    <el-button type="primary" @click="onSubmit(1)">回退库管</el-button>
    <el-button type="primary" @click="onSubmit(0)">回退顾问</el-button>
  </el-form-item>

</div>
</el-form>
</div>

<script>
var vm = new Vue({
	el:'#box',
	data:{
    	userBalance:{$userBalance},
		userBalanceZeng:{$userBalanceZeng},
		userCards:{:json_encode($userCards)}, 
		settlements:[{
			name:'现金',
			value:1
		},{
			name:'会员卡',
			value:2
		},{
			name:'赠送',
			value:3
		},{
			name:'疗程卡',
			value:4
		},{
	      name:'会员卡赠送',
	      value: 10000
	    }],
		sn:"{$formData.sn}",
		user:'',
		user_id:{$formData.user_id},
		room:'',
		room_id:{$formData.room_id},

		form:{
			service_price:0,
			product_price:0,
			zong_price:0,
			id:{$formData.id},
			recharge:{
			    price:0,
			    price2:0,
			},
      		card_price:0,
		},
		users:{:json_encode($users)},
		rooms:{:json_encode($rooms)},
		tableData:[],
		project_data:{:json_encode($project_data,true)},
		advisers:{:json_encode($advisers)},
        technicians:{:json_encode($technicians)},
        products:{:json_encode($products)},
        warehouses:{:json_encode($warehouses)},
        accounts:{:json_encode($accounts)},
        cashiers:{:json_encode($cashiers)},
        productData:[],
        defaultProduct:[],
        cardData:[],
        cardList:[],
        cardDefault:[],
	},
	created(){
    var cardList = {:json_encode($cardList)};
    this.cardList = cardList;
    this.cardDefault = cardList[0];
		// console.log(this.cardList);
		this.defaultProduct = this.products[0]
		for(var i = 0; i < this.users.length;i++){
			if(this.user_id === this.users[i].id){
				this.user = this.users[i].nick;
			}
		}
		for(var i = 0; i < this.rooms.length;i++){
			if(this.room_id === this.rooms[i].id){
				this.room = this.rooms[i].name;
			}
		}
		for(var i = 0; i< this.project_data.length;i++){
            this.tableData.push({
                project_id:Number(this.project_data[i].project_id),
                project_name:this.project_data[i].project_name,
                price: this.project_data[i].price,
                num: this.project_data[i].num,
                is_give: Number(this.project_data[i].is_give),
                settlement: Number(this.project_data[i].settlement),
                type: this.project_data[i].type,
                shougong: this.project_data[i].shougong,
                bak: this.project_data[i].bak,
                adviser_id: Number(this.project_data[i].adviser_id),
                technician_ids: this.project_data[i].technician_ids.map(x => Number(x)),
								projectArr:''
            })
        }
	},

	methods:{
		getProjectItem:function(idx){
				var that = this
				var id = that.tableData[idx].card_pid;
        // var is_give = that.tableData[idx].is_give;
				axios.get("{:url('getProjectNum')}?id="+id).then(function(response) {
					that.tableData[idx].projectArr = '';
						if(response.data.status === true){
								var str = '';
								for (var i = 0; i < response.data.data.length; i++) {
									str += response.data.data[i].name + ' * '+ response.data.data[i].num + ' '

								}
								that.tableData[idx].projectArr = str
									console.log(that.tableData[idx])
						}else{
								that.$message({
										type: 'error',
										message: response.data.message
								})
						}
			}).catch(function (error) {
					that.$message({
									type: 'error',
									message: error
							})
			});
		},
    addCard:function(){
        this.cardData.push({
            id:this.cardDefault.id,
            name:this.cardDefault.name,
            price:this.cardDefault.price,
        });
    },
		onSubmit:function(status = 3){
			var params = {};
			var that = this;
			params = this.form;

			params.status = status;
			params.projects = this.tableData;
      		params.products = this.productData;
			params.cardData = this.cardData;
			axios.post('{:url('')}', params).then(function (response) {
                if(response.data.status === true){
                    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                    that.$message({
                        type: 'success',
                        message: response.data.message,
                        onClose: function(){
                            parent.layer.close(index); //再执行关闭
                            window.parent.location.reload();
                        }
                    })
                }else{
                    that.$message({
                        type: 'error',
                        message: response.data.message
                    })
                }
            }).catch(function (error) {
                that.$message({
                        type: 'error',
                        message: error
                    })
            });
		},
		addPro:function(){
			this.productData.push({
				product_id:Number(this.defaultProduct.id),
				name:this.defaultProduct.name,
				price2: this.defaultProduct.price2,
				num:1,
				is_deposit:1,
			});
		},
		removeItem:function(idx){
			this.productData.splice(idx,1);
		},
		removeItem1:function(idx){
			this.cardData.splice(idx,1);
		},
		setProduct_price(item, num) {
            item.price = (((item.price||0)  / (item.old_number||1)) * num).toFixed(2)
            item.old_number = num
        },
        setProduct_price2(item, num) {
        	// console.log(num)
            item.price2 = (((item.price2||0)  / (item.old_number2||1)) * num).toFixed(2)
            item.old_number2 = num
        },
        proSelect:function(idx){
    			var that = this;
    		    let row = that.products.filter(function(p){
    			     return p.id === that.productData[idx].product_id;
    			 })[0]
    	        Object.keys(row).map(key => {

    	          if (key !== 'product_id') {
    	            that.$set(that.productData[idx], key, row[key])
    	          }
    	        })

    		},
        cardSelect:function(idx){
          var that = this;
            let row = that.cardList.filter(function(p){
               return p.id === that.cardData[idx].id;
           })[0]
              Object.keys(row).map(key => {

                if (key !== 'id') {
                  that.$set(that.cardData[idx], key, row[key])
                }
              })
        },
		shougongChange:function(shougong,idx){
			var that = this;
			// 修改问题
			// 手工能不能做成必填项，如果是零就填0，不是必选项，会有遗漏
			if(shougong == undefined){
				that.tableData[idx].shougong = 0;
			}
		}
	},

	watch:{
		form:{
			handler:function(){
				this.form.zong_price = this.form.service_price + this.form.product_price + Number(this.form.recharge.price) + this.form.card_price;
			},
			deep:true
		},
		tableData:{
			handler:function(){
	            var sum = 0
		          this.tableData.map(i => {
		            sum +=  Number(i.price);

		          })
		          this.form.service_price =  Number.isNaN(sum) ? 0 : sum;

	        },
	        deep:true//对象内部的属性监听，也叫深度监听
		},
		productData:{
			handler:function(){
	            var sum = 0
		          this.productData.map(i => {
		            sum +=  Number(i.price2)
		          })
		          this.form.product_price =  Number.isNaN(sum) ? 0 : sum
	        },
	        deep:true//对象内部的属性监听，也叫深度监听
		},
    cardData:{
      handler:function(){
              var sum = 0
              this.cardData.map(i => {
                sum +=  Number(i.price)
              })
              this.form.card_price =  Number.isNaN(sum) ? 0 : sum
          },
          deep:true//对象内部的属性监听，也叫深度监听
    }
	},
})

</script>
